<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript06브라우저객체2</title>
	</head>
	<body>
		<h1>브라우저객체 BOM</h1>
		<h3>history</h3>
		<p>브라우저 방문기록을 담고 있는 객체</p>
		<p>history.length : 방문기록 총 수</p>
		<p>history.forward() : 방문기록 중 앞 주소로 이동
			<button type="button" onclick="go2for();">앞으로</button></p>
		<p>history.back() : 방문기록 중 이전 주소로 이동
			<button type="button" onclick="go2back();">뒤로</button></p>
		<p>history.go() : 방문기록 중 특정 주소로 이동
			<button type="button" onclick="go2go();">뒤로 3페이지</button></p>
		<script type="text/javascript">
			document.write( history.length);
			function go2for(){ history.forward();	}
			function go2back(){history.back();}
			function go2go(){history.go( -3 );}
		</script>
		<hr />
		<h3>타이밍 제어</h3>
		<p>자바스크립트를 통해 특정시간 간격으로 코드(함수)를 실행할 수 있음</p>
		<p>setTimeout(함수이름, 1/1000초) : 지정한 시간이 지난 후에 코드를 한번만 실행, 해제시 clearTimaout 사용</p>
		<p>setInterval(함수이름, 1/1000초) : 자정한 시간때 마다 코드를 주기적으로 실행, 해제시 clearInterval 사용</p>
		<h2 id="todays"> </h2>
		<script type="text/javascript">
			function showTime(){
         		var today = new Date();
         		var times = today.toLocaleTimeString();
         		var dates = today.toLocaleDateString();
	         	// document.write(dates + "" + times);
	         	document.getElementById("todays").innerHTML = dates + "" + times;  //날짜 및 시간출력
	      }
		      showTime();
		      var time1 =  setTimeout("showTime()",1000);
		      var time2 =  setInterval("showTime()",1000);
		      clearTimeout(time1);
		      clearInterval(time2);
		</script>
		<hr />
		<h3>쿠키cookie 제어</h3>
		<p>방문자 정보를 웹페이지 내에 저장할 수 있게 해줌</p>	
		<p>쿠키는 컴퓨터에 텍스트 파일형태로 저장되는 작은 데이터를 의미</p>	
		<p>웹 서버에서 브라우저로 웹페이지가 전송되고 나면
			서버와 브라우저간의 연결은 끊어짐</p>
		<p>이렇게 되면 서버는 접속한 사용자에 대한 모든 정보를 잃어버리게 됨(HTTP의 단점 : stateless)</p>
		<p>하지만, 쿠키를 이용하면 이러한 문제는 해결됨</p>
		<p>사용자가 사이트를 방문하면 쿠키에 그의 이름이 저장됨</p>
		<p>사용자가 그 다음에 사이틀르 또 방문하면 쿠키를 통해 그의 이름을 기억함</p>
		<p>쿠키에 저장되는 정보는 '이름=값' 형태임</p>
		<p>JSP에서는 세션을 이용해서 사용자들을 구분함</p>
		<p>document.cooke : 쿠키생성</p>
		<p>username : 방문자 이름을 의미하는 속성</p>
		<p>expires : 쿠키 유지 시간</p>
		<p>path : 쿠키 생성 위치</p>
		<p>domain : 쿠키 생성 도메인 주소</p>
		<p>document.cookie = "username=수지; expires=날짜; path=/"</p>
		<p>쿠키삭제는 유효시간을 지정한 시간보다 한참 이전으로 되돌려서 설정할 것</p>
		<script type="text/javascript">
			var name1 = "username=수지;";	
			var name2 = "kor=98;";	
			var name3 = "eng=95;";	
			var name4 = "mat=92;";
			var expdate = new Date();
			expdate.setTime(expdate.getTime() + (60* 60* 24*1000));
			expdate = "expires=" + expdate.toGMTString();
			var path = ";"; //path = /
			document.cookie = name1 + expdate + path;
			document.cookie = name2 + expdate + path;
			document.cookie = name3 + expdate + path;
			document.cookie = name4 + expdate + path;
		</script>	
		<script type="text/javascript">
			var cookies = document.cookie.split(";");
			alert("쿠키 항목갯수 : " + cookies.length);
			for(var i = 0, j = cookies.length; i <j ; ++i){
				if( cookies[i].indexOf("username") > -1)
				name = cookies[i].substring("username".length+1, cookies[i].length);
			}
			for(var i = 0, j = cookies.length; i <j ; ++i){
				if( cookies[i].indexOf("kor") > -1)
				kor = cookies[i].substring("kor".length+2, cookies[i].length);
			}
			for(var i = 0, j = cookies.length; i <j ; ++i){
				if( cookies[i].indexOf("eng") > -1)
				eng = cookies[i].substring("eng".length+2, cookies[i].length);
			}
			for(var i = 0, j = cookies.length; i <j ; ++i){
				if( cookies[i].indexOf("mat") > -1)
				mat = cookies[i].substring("mat".length+2, cookies[i].length);
			}
			document.write(name + "<br />");
			document.write(kor + "<br />");
			document.write(eng + "<br />");
			document.write(mat + "<br />");
		</script>
		<script type="text/javascript">
			expdate = new Date(1970, 1, 1, 0, 0 ,0);
			document.cookie = name1 + expdate + path;
			document.cookie = name2 + expdate + path;
			document.cookie = name3 + expdate + path;
			document.cookie = name4 + expdate + path;
		</script>
		</body>
</html>